<template>
  <div>
    <el-row>
      <el-col :span="22">
        <el-card>
          <div class="login">
            <img
              class="img1"
              src="https://cdn.pixabay.com/photo/2021/01/29/08/10/musician-5960112_960_720.jpg"
              alt=""
            />
            <div class="login_info">
              <img
                src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
                alt=""
              /> 
              <h1>登录仿网易云平台</h1>
              <el-form :model="form">
                <el-form-item label="账号:">
                  <el-input v-model="form.account" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码:">
                  <el-input type="password" v-model="form.password" clearable show-password></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
              </el-form>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default {
  name: "Login",
  setup() {
    const router = useRouter();
    const form = reactive({
      account: "",
      password: "",
    });
    function onSubmit(){
      if(form.account==""||form.password==""){
        ElMessage.info('请完整填写信息');
      }else{
        ElMessage.success('登录成功')
        router.replace('/home')
      }
    }
    return {
      form,
      onSubmit
    }
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 4%;
  height: 650px;
  margin-left: 13%;
}
.login {
  display: flex;
}
.login .img1 {
  width: 600px;
}
.login .login_info {
  margin-top: 100px;
  margin-left: 150px;
}
.login .login_info img {
  width: 50px;
}
.el-form{
  margin-top: 100px;
}
.el-button{
  width: 300px;
}
</style>
